<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系姓名</text>
			<input class="input" type="text" v-model="addressData.contact" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号码</text>
			<input class="input" type="number" v-model="addressData.tel" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<!-- <view class="AddressLine">
			<view>选择地址</view>
			<view class="right">
				<AddressPicker @change="change" :level="3">{{planLocate}} </AddressPicker>
			</view>
		</view> -->
		<view class="row b-b">
			<text class="tit">选择区域</text>
			<text class="input" style="color: #999999;">
				<AddressPicker v-if="manageType === 'add'" :addressValue="addressData.address" @change="change" :level="3">{{addressData.address}} </AddressPicker>
				<AddressPicker v-if="manageType === 'edit'&&addressData.address !== '请选择所在地区'" :label1="addressData.label1" @change="change" :level="3">{{addressData.address}} </AddressPicker>
			</text>
			<!-- <text class="yticon icon-shouhuodizhi"></text> -->
		</view>
		<view class="row b-b">
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="addressData.no" placeholder="详细地址" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="isDefault" color="#fa436a" @change="switchChange" />
		</view>
		<view class="padding" v-if="manageType === 'edit'">
			<view class="flex  p-xs margin-bottom-sm mb-sm">
				<view @click="delAction" class="flex-sub bg-red padding-sm margin-xs radius text-center">
					<view>删除</view>
				</view>
				<view @click="confirm" class="flex-treble bg-blue padding-sm margin-xs radius text-center">
					<view>提交</view>
				</view>
			</view>
		</view>
		<button v-if="manageType === 'add'" class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import { userAddressServicedelete,userAddressServiceinsert,userAddressServiceget,userAddressServiceupdate } from 'api/shop';
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		data() {
			return {
				isDefault: false,
				addressData: {
					isDefault:'0',
					contact: '',
					tel: '',
					label1:'',
					address: '请选择所在地区',
					no: '',
					uid:''
				},
				manageType:'',
				createOrder:'',
				cart:''
			}
		},
		components: {AddressPicker},
		onLoad(option){
			let title = '新增收货地址';
			this.type = option.type
			this.addressData.uid = option.uid
			if(option.type==='edit'){
				title = '编辑收货地址'
				this.info(option.id)
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
			if(option.createOrder == '1'){
				this.createOrder = '?createOrder=1'
			}
			if(option.cart == '1'){
				this.cart = '&cart=1'
			}
		},
		methods: {
			delAction(){
				let _this = this
				uni.showModal({
				    title: '温馨提示',
				    content: '确定要删除该地址吗？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log(_this.addressData,'addressData');
							userAddressServicedelete({id:_this.addressData.id}).then(ret => {
								if (ret.data.errcode === 0) {
									_this.$api.msg('删除成功！');
									setTimeout(()=>{
										uni.redirectTo({
											url: `/pages/address/address`+_this.createOrder+_this.cart
										})
									}, 800)
									// setTimeout(()=>{
										// uni.navigateTo({
										// 	url: `/pages/address/address`,
										// 	// +this.createOrder+this.cart
										// })
									// }, 2000)
								} else {
									_this.$api.msg(ret.data.errmsg);
									return false;
								}
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			info(id){
				userAddressServiceget({id:id}).then(ret => {
					if (ret.data.errcode === 0) {
						this.addressData = ret.data.data
						// this.addressData.label1 = '2-1-2'
						if(ret.data.data.isDefault === '1'){
							this.isDefault = true
						}
					} else {
						this.$api.msg(ret.data.errmsg);
						return false;
					}
				});
			},
			switchChange(e){
				console.log(e.detail,'e')
				if(e.detail){
					this.addressData.isDefault = '1';
				}else{
					this.addressData.isDefault = '0';
				}
			},
			//父组件的获取子组件传递的值
			change(result) {
				console.log(JSON.stringify(result.data));
				this.addressData.address = '';
				result.data.forEach( (item,index) =>{
					if(index===0){
						this.addressData.address += item.name
					}else{
						this.addressData.address += '-' +item.name
					}
				}) ;
				let arr =this.addressData.address.split('-');
				console.log(arr)
				this.addressData.label1 = result.data[0].sort
			},

			//提交
			confirm(){
				let data = this.addressData;
				if(!data.contact){
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.tel)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!data.address){
					this.$api.msg('请选择选择区域');
					return;
				}
				if(!data.no){
					this.$api.msg('请填写详细地址');
					return;
				}
				console.log(data,'0000')
				if(this.manageType=='edit'){
					userAddressServiceupdate(data).then(ret => {
						if (ret.data.errcode === 0) {
							this.$api.msg('修改成功！');
							setTimeout(()=>{
								uni.navigateTo({
									url: `/pages/address/address`+this.createOrder+this.cart
								})
							}, 800)
						} else {
							this.$api.msg(ret.data.errmsg);
							return false;
						}
					});
				}else{
					userAddressServiceinsert(data).then(ret => {
						if (ret.data.errcode === 0) {
							this.$api.msg('添加成功！');
							setTimeout(()=>{
								uni.navigateTo({
									url: `/pages/address/address`+this.createOrder+this.cart
								})
							}, 800)
						} else {
							this.$api.msg(ret.data.errmsg);
							return false;
						}
					});
				}


				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				// this.$api.prePage().refreshList(data, this.manageType);
				// this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);

			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;

		.tit{
			flex-shrink: 0;
			width: 150upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
